<template>
  <div class="SearchShopListContainer">
    <!-- 排序 -->
    <van-dropdown-menu>
      <!-- 综合 -->
      <van-dropdown-item class="drop-item-1" title="综合" ref="drop-item-1">
        <div class="tag-list">
          <van-tag
            @click="handleDefaultSort"
            :color="comprehensiveSortFlag === true ? '#dd1a21' : '#333'"
            class="tag"
            plain
            size="large"
            >默认排序</van-tag
          >
        </div>
      </van-dropdown-item>

      <!-- 价格 -->
      <van-dropdown-item class="drop-item-2" title="价格" ref="drop-item-2">
        <div class="form">
          <van-row class="row1">
            <van-col class="col1" span="4">筛选</van-col>
            <van-col
              class="col2"
              span="10"
              :class="{ activeInp: currentInp === 1 }"
            >
              <van-field
                @focus="currentInp = 1"
                @blur="currentInp = -1"
                v-model="floorPrice"
                type="number"
                placeholder="最低价"
                input-align="center"
              />
            </van-col>
            <van-col class="col3" span="2">—</van-col>
            <van-col
              class="col4"
              span="10"
              :class="{ activeInp: currentInp === 2 }"
            >
              <van-field
                @focus="currentInp = 2"
                @blur="currentInp = -1"
                v-model="upperPrice"
                type="number"
                placeholder="最高价"
                input-align="center"
              />
            </van-col>
          </van-row>
          <van-row class="row2">
            <van-col class="col1" span="3">排序</van-col>
            <van-col
              class="col2"
              span="8"
              @click="descSorted = false"
              :class="{ activeBtn: descSorted === false }"
              >从低到高</van-col
            >
            <van-col class="col3" span="1"></van-col>
            <van-col
              class="col4"
              span="8"
              @click="descSorted = true"
              :class="{ activeBtn: descSorted === true }"
              >从高到低</van-col
            >
          </van-row>
        </div>
        <van-row class="row3">
          <van-col class="col1" span="12" @click="dropDownItem2Cancel"
            >取消</van-col
          >
          <van-col @click="handlerPriceSort" class="col2" span="12"
            >确认</van-col
          >
        </van-row>
      </van-dropdown-item>

      <!-- 价格升序降序图标 -->
      <div class="priceIcon">
        <van-icon
          class="upper"
          :class="{ active: descSorted === false }"
          name="arrow-up"
        />
        <van-icon
          class="floor"
          :class="{ active: descSorted === true }"
          name="arrow-down"
        />
      </div>

      <!-- 分类 -->
      <van-dropdown-item class="drop-item-3" title="分类" ref="drop-item-3">
        <div class="tag-list">
          <van-tag
            @click="handlerCategory(category, index)"
            :color="currentCategoryIndex === index ? '#dd1a21' : '#333'"
            class="tag"
            plain
            size="large"
            v-for="(category, index) in categoryList"
            :key="category.id"
            >{{ category.name }}</van-tag
          >
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>

    <ShopList
      v-show="!sonSpaceFlag"
      :searchShopList="searchShopList"
      style="margin-top: 94px"
    ></ShopList>

    <DefaultPage
      :text1="'抱歉，没有找到符合条件的商品'"
      :text2="'建议修改筛选条件重新查找'"
      v-show="sonSpaceFlag"
    ></DefaultPage>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'SearchShopList',

  props: {
    currentCategoryIndex: {
      typeof: Number,
      default: 0,
    },
    sonSpaceFlag: {
      typeof: Boolean,
      default: false,
    },
  },

  data() {
    return {
      // 综合
      comprehensiveSortFlag: true, // 综合排序的样式

      // 价格
      currentInp: -1, // 点击inp的按钮切换框
      floorPrice: '', // 价格,筛选最低价和最高价
      upperPrice: '',
      descSorted: -1,

      // 分类
      categoryId: 0,
      // currentCategoryIndex: 0,
    };
  },

  methods: {
    // 价格排序的取消
    dropDownItem2Cancel() {
      this.floorPrice = '';
      this.upperPrice = '';
      this.descSorted = -1;
      this.$refs['drop-item-2'].toggle(false);
    },

    // 点击综合默认排序
    handleDefaultSort() {
      this.comprehensiveSortFlag = true;
      this.$emit('priceAndCategorySort', 0, 0, 0, false);
      this.$refs['drop-item-1'].toggle(false);
    },

    // 点击分类tag改变分类
    handlerCategory(category, index) {
      this.comprehensiveSortFlag = false;
      this.currentCategoryIndex = index;
      this.categoryId = category.id; // 保存categoryId，供价格排序使用
      this.$emit('update:handlerIndex', index);
      // this.currentCategoryIndex = index;
      this.$emit(
        'priceAndCategorySort',
        this.categoryId,
        this.floorPrice,
        this.upperPrice,
        this.descSorted
      );
      this.$refs['drop-item-3'].toggle(false);
    },

    // 点击确认价格排序
    handlerPriceSort() {
      this.comprehensiveSortFlag = false;
      this.$emit(
        'priceAndCategorySort',
        this.categoryId,
        this.floorPrice,
        this.upperPrice,
        this.descSorted
      );
      this.$refs['drop-item-2'].toggle(false);
    },
  },

  computed: {
    ...mapGetters(['categoryList', 'searchShopList']),
  },
};
</script>

<style lang="less" scoped>
.van-dropdown-menu {
  position: fixed;
  left: 0px;
  width: 100%;
  top: 54px;
  z-index: 4;
  ::v-deep .van-dropdown-menu__bar {
    background-color: #fafafa;
    height: 40px;
    &.van-dropdown-menu__bar--opened {
      z-index: 0;
    }
    .van-dropdown-menu__title {
      font-size: 14px;
      &.active {
        color: #e31a21;
      }
      &::after {
        border: 1px solid transparent;
      }
    }
  }
  ::v-deep .drop-item-1 {
    .tag-list {
      padding: 20px;
      overflow-y: scroll;
      max-height: 150px;
      .tag {
        margin: 0 20px 10px 0;
      }
    }
  }

  ::v-deep .drop-item-2 {
    position: relative;
    .form {
      padding: 20px 15px 0;
      font-size: 14px;
      text-align: center;
      .row1 {
        display: flex;
        height: 26px;
        line-height: 26px;
        margin-bottom: 20px;
        .col1 {
          text-align: left;
        }
        .col2 {
          border: 1px solid #7f7f7f;
          color: #999;
          .van-cell {
            padding: 0;
          }
        }
        .col3 {
          margin: 0 11px;
        }
        .col4 {
          border: 1px solid #7f7f7f;
          color: #999;
          .van-cell {
            padding: 0;
          }
        }

        & .activeInp {
          border-color: #ee0a24;
        }
      }

      .row2 {
        display: flex;
        line-height: 26px;
        margin-bottom: 20px;
        .col1 {
          text-align: left;
          margin-right: 8px;
        }
        .col2 {
          border: 1px solid #7f7f7f;
        }
        .col4 {
          border: 1px solid #7f7f7f;
        }
        & .activeBtn {
          border: 1px solid #ee0a24;
          color: #ee0a24;
        }
      }
    }
    .row3 {
      height: 50px;
      border-top: 1px solid #d9d9d9;
      line-height: 50px;
      text-align: center;
      font-size: 14px;
      .col2 {
        color: #ee0a24;
      }
    }
  }

  .priceIcon {
    position: absolute;
    top: 11px;
    left: calc(50% + 16px);
    display: flex;
    flex-direction: column;
    color: #d7d7d7;
    font-size: 12px;
    .active {
      color: #b44343;
    }
    .floor {
      margin-top: -6px;
    }
  }

  ::v-deep .drop-item-3 {
    .tag-list {
      padding: 20px;
      overflow-y: scroll;
      max-height: 150px;
      .tag {
        margin: 0 20px 10px 0;
      }
    }
  }
}
</style>
